<template>
  <div class="prescription-container">
    <van-tabs
        v-model:active="activeTab"
        sticky
        @change="handleTabChange"
        animated
    >
      <van-tab title="全部" name="all">
        <div v-if="allPrescriptionList.length > 0">
          <van-cell-group>
            <van-cell
                v-for="(item, index) in allPrescriptionList"
                :key="index"
                is-link
                size="large"
                @click="handlePrescriptionClick(item)"
                style="margin-bottom: 16px"
            >
              <template #title>
                <div style="font-size:16px;">
                  处方号：{{ item.prescriptionId }}
                </div>
              </template>
              <template #label>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-right: 1vw; margin-bottom: 8px;">
                  <span>医生：{{ item.doctorName }}</span>
                  <span>开具时间：{{ item.prescriptionDate }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-right: 1vw;">
                  <span>就诊人：{{ item.patientName }}</span>
                  <span>处方总金额：{{ item.totalPrice }}元</span>
                </div>
              </template>
              <template #right-icon>
                <van-tag :type="getStatusType(item.status)" style="height: 70px;width:50px; display: flex; align-items: center; justify-content: center; padding: 0 8px;">{{ statusEnum[item.status] }}</van-tag>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
        <div v-else class="empty-tip">暂无处方记录</div>
      </van-tab>

      <van-tab title="待付款" name="unpaid">
        <div v-if="unpaidPrescriptionList.length > 0">
          <van-cell-group>
            <van-cell
                v-for="(item, index) in unpaidPrescriptionList"
                :key="index"
                is-link
                size="large"
                @click="handlePrescriptionClick(item)"
                style="margin-bottom: 16px"
            >
              <template #title>
                <div style="font-size:16px;">
                  处方号：{{ item.prescriptionId }}
                </div>
              </template>
              <template #label>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-right: 1vw; margin-bottom: 8px;">
                  <span>医生：{{ item.doctorName }}</span>
                  <span>开具时间：{{ item.prescriptionDate }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-right: 1vw;">
                  <span>就诊人：{{ item.patientName }}</span>
                  <span>处方总金额：{{ item.totalPrice }}元</span>
                </div>
              </template>
              <template #right-icon>
                <van-tag :type="getStatusType(item.status)" style="height: 70px;width:50px; display: flex; align-items: center; justify-content: center; padding: 0 8px;">{{ statusEnum[item.status] }}</van-tag>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
        <div v-else class="empty-tip">暂无待付款处方</div>
      </van-tab>

      <van-tab title="待取药" name="waiting">
        <div v-if="waitingPrescriptionList.length > 0">
          <van-cell-group>
            <van-cell
                v-for="(item, index) in waitingPrescriptionList"
                :key="index"
                is-link
                size="large"
                @click="handlePrescriptionClick(item)"
                style="margin-bottom: 16px"
            >
              <template #title>
                <div style="font-size: 16px;">
                  处方号：{{ item.prescriptionId }}
                </div>
              </template>
              <template #label>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-right: 1vw; margin-bottom: 8px;">
                  <span>医生：{{ item.doctorName }}</span>
                  <span>开具时间：{{ item.prescriptionDate }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-right: 1vw;">
                  <span>就诊人：{{ item.patientName }}</span>
                  <span>处方总金额：{{ item.totalPrice }}元</span>
                </div>
              </template>
              <template #right-icon>
                <van-tag :type="getStatusType(item.status)" style="height: 70px;width:50px;display: flex; align-items: center; justify-content: center; padding: 0 8px;">{{ statusEnum[item.status] }}</van-tag>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
        <div v-else class="empty-tip">暂无待取药处方</div>
      </van-tab>

      <van-tab title="已完成" name="completed">
        <div v-if="completedPrescriptionList.length > 0">
          <van-cell-group>
            <van-cell
                v-for="(item, index) in completedPrescriptionList"
                :key="index"
                is-link
                size="large"
                @click="handlePrescriptionClick(item)"
                style="margin-bottom: 16px"
            >
              <template #title>
                <div style="font-size: 16px;">
                  处方号：{{ item.prescriptionId }}
                </div>
              </template>
              <template #label>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-right: 1vw; margin-bottom: 8px;">
                  <span>医生：{{ item.doctorName }}</span>
                  <span>开具时间：{{ item.prescriptionDate }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-right: 1vw;">
                  <span>就诊人：{{ item.patientName }}</span>
                  <span>处方总金额：{{ item.totalPrice }}元</span>
                </div>
              </template>
              <template #right-icon>
                <van-tag :type="getStatusType(item.status)" style="height: 70px;width:50px;display: flex; align-items: center; justify-content: center; padding: 0 8px;">{{ statusEnum[item.status] }}</van-tag>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
        <div v-else class="empty-tip">暂无已完成处方</div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NavBar, Tabs, Tab, CellGroup, Cell, Tag } from 'vant';
import { listAllPrescriptionAPI } from "../../api/prescription/prescription.js";

const route = useRoute();
const router = useRouter();

// 使用字符串类型的 activeTab
const activeTab = ref('all');

// 返回上一页
const goBack = () => {
  router.push('/my');
};

// 处理标签页切换
const handleTabChange = (name) => {
  activeTab.value = name;
  router.replace({
    query: { ...route.query, tab: name }
  });
};

// 获取状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case 0:
      return 'warning';
    case 1:
      return 'success';
    case 2:
      return 'primary';
    default:
      return 'default';
  }
};

// 状态枚举
const statusEnum = ['待付款', '待取药', '取药中' ,'已完成'];

// 监听路由变化
onMounted(() => {
  const tab = route.query.tab || 'all';
  activeTab.value = tab;
});

// 监听路由参数变化
watch(() => route.query.tab, (newTab) => {
  if (newTab && newTab !== activeTab.value) {
    activeTab.value = newTab;
  }
}, { immediate: true });

// 处方订单列表数据
const allPrescriptionList = ref([]); // 全部处方
const unpaidPrescriptionList = ref([]); // 待付款处方
const waitingPrescriptionList = ref([]); // 待取药处方
const completedPrescriptionList = ref([]); // 已完成处方

// 处理处方订单点击
const handlePrescriptionClick = (item) => {
  console.log('点击处方订单:', item);
  router.push({
    path: '/prescriptionOrderPage',
    query: {
      prescriptionId: item.prescriptionId,
    }
  });
};

// 获取全部处方订单
const fetchPrescriptionList = async () => {
  const res = await listAllPrescriptionAPI();
  console.log(res);
  if (res.success) {
    allPrescriptionList.value = res.data;
    unpaidPrescriptionList.value = res.data.filter(item => item.status === 0);
    waitingPrescriptionList.value = res.data.filter(item => item.status === 1);
    completedPrescriptionList.value = res.data.filter(item => item.status === 2);
  }
};

onMounted(() => {
  fetchPrescriptionList();
});
</script>

<style scoped>
.prescription-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.empty-tip {
  text-align: center;
  color: #969799;
  padding: 32px 0;
  font-size: 14px;
}

:deep(.van-tabs__wrap) {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

:deep(.van-tab--active) {
  font-weight: bold;
}

:deep(.van-tag) {
  margin-left: 8px;
}
</style>